<template>
  <s-modal title="字典配置" :visible="visible" width="1200px" :footer="null" @cancel="visible = false">
    <div style="height: 600px; width: 100%">
      <a-card style="width: 1152px">
        <s-list-form>
          <template #less>
            <s-form-item size="list-middle" label="字典文本">
              <s-input v-model="query.text" placeholder="字典文本" />
            </s-form-item>
            <s-form-item size="list-middle" label="字典值">
              <s-input v-model="query.value" placeholder="字典值" />
            </s-form-item>
          </template>
          <template #more />
        </s-list-form>
        <div>
          <s-tool-bar>
            <template #left>
              <s-button
                v-if="authorize.insert"
                icon="plus-outlined"
                type="primary"
                @click="
                  $refs.add.init((dialog) => {
                    dialog.resetFormValue(), dialog.open()
                  })
                "
              >
                新增
              </s-button>
              <a-popconfirm
                v-if="authorize.deleteMulti"
                title="确认删除所选数据？"
                ok-text="是"
                cancel-text="否"
                @confirm="deleteMulti"
              >
                <s-button type="danger" icon="delete-outlined"> 删除 </s-button>
              </a-popconfirm>
            </template>
            <template #right>
              <s-button type="primary" icon="search-outlined" @click="$refs.table.search(query)"
                >查询</s-button
              >
              <s-button
                style="margin-left: 8px"
                icon="stop-outlined"
                @click="
                  () => {
                    query = { groupId: query.groupId }
                    $refs.table.search(query)
                  }
                "
                >重置</s-button
              >
            </template>
          </s-tool-bar>
          <s-table
            ref="table"
            :init-param="query"
            :pull-on-create="false"
            bordered
            :scroll="{ y: 340 }"
            :columns="columns"
            url="/data/dict/item/pageList"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                <a
                  v-if="authorize.selectOneById"
                  style="margin-right: 8px"
                  @click=";(selectRowId = record.id), $refs.detail.init()"
                >
                  <s-icon type="eye-outlined" />查看
                </a>
                <a
                  v-if="authorize.update"
                  style="margin-right: 8px"
                  @click=";(selectRowId = record.id), $refs.update.init()"
                >
                  <s-icon type="edit-outlined" />编辑
                </a>
                <a-popconfirm
                  v-if="authorize.delete"
                  title="确认删除此条数据？"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="deleteById(record.id)"
                >
                  <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
                </a-popconfirm>
              </template>
            </template>
          </s-table>
        </div>
        <!--          <detail ref="detail" />
          <add
            ref="add"
            @success="
              () => {
                $refs.table.refresh()
              }
            "
          />
          <update
            ref="update"
            @success="
              () => {
                $refs.table.refresh()
              }
            "
          />-->
        <s-dynamic-form-dialog
          ref="add"
          title="添加"
          form-id="7d87ee9002cd430992b264b5dae3489b"
          @save="addItem"
        ></s-dynamic-form-dialog>
        <s-dynamic-form-dialog
          ref="detail"
          disabled
          title="详情"
          :pull-form-data="
            () => {
              return $api.GET('/data/dict/item/selectOneById', { id: selectRowId })
            }
          "
          form-id="7d87ee9002cd430992b264b5dae3489b"
        >
          <template #default="{ form }">
            <s-form-item label="创建人">
              <s-input v-model="form.createByAccount" disabled />
            </s-form-item>
            <s-form-item label="创建时间">
              <s-input v-model="form.createDate" disabled />
            </s-form-item>
            <s-form-item label="修改人">
              <s-input v-model="form.updateByAccount" disabled />
            </s-form-item>
            <s-form-item label="修改时间">
              <s-input v-model="form.updateDate" disabled />
            </s-form-item>
          </template>
        </s-dynamic-form-dialog>
        <s-dynamic-form-dialog
          ref="update"
          :pull-form-data="
            () => {
              return $api.GET('/data/dict/item/selectOneById', { id: selectRowId })
            }
          "
          title="编辑"
          form-id="7d87ee9002cd430992b264b5dae3489b"
          @save="updateItem"
        >
        </s-dynamic-form-dialog>
      </a-card>
    </div>
  </s-modal>
</template>

<script>
const columns = [
  {
    title: '文本',
    dataIndex: 'text',
    sorter: true,
    width: 200
  },
  {
    title: '值',
    dataIndex: 'value',
    sorter: true,
    ellipsis: true,
    width: 200
  },
  {
    title: '排序号',
    dataIndex: 'orderNum',
    sorter: true,
    ellipsis: true,
    width: 100
  },
  {
    title: '创建人',
    dataIndex: 'createByAccount',
    ellipsis: true,
    width: 200
  },
  {
    title: '创建时间',
    dataIndex: 'createDate',
    ellipsis: true,
    width: 200
  },
  {
    title: '修改人',
    dataIndex: 'updateByAccount',
    ellipsis: true,
    width: 200
  },
  {
    title: '修改时间',
    dataIndex: 'updateDate',
    ellipsis: true,
    width: 200
  },
  {
    title: '操作',
    fixed: 'right',
    key: 'action',
    width: 200
  }
]
// import Detail from './detail/index.vue'
// import Add from './add/index.vue'
// import Update from './update/index.vue'
export default {
  name: 'QueryList',
  // components: { Detail, Add, Update },
  data() {
    return {
      query: {},
      visible: false,
      columns: columns,
      selectRowId: null
    }
  },
  authorize: '/data/dict/item/permissionList',
  methods: {
    addItem(values, fullValue, dialog) {
      values.groupId = this.query.groupId
      this.$api
        .PUT('/data/dict/item/insert', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    updateItem(values, fullValue, dialog) {
      values.groupId = this.query.groupId
      values.id = fullValue.id
      this.$api
        .PUT('/data/dict/item/update', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    open(item) {
      this.query.groupId = item.groupId
      this.visible = true
    },
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api
          .DELETE('/data/dict/item/deleteMulti', { ids: keys.toString() })
          .then(() => {
            this.$loading(false)
            this.$refs.table.search(this.query)
          })
          .catch(() => {
            this.$loading(false)
          })
      }
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/data/dict/item/delete', { id: id })
        .then(() => {
          this.$loading(false)
          this.$refs.table.search(this.query)
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
